<template>
	<view style="height: 100%;">
		<!-- 头部搜索栏 -->
		<view style="position: fixed;
		z-index:666;
		top:0;">
			<!-- 头部搜索栏 -->
			<view class="nav-tab">
				<view @click="open" style="width:142rpx" class="text-hidden-one">
					<text class="font-md"  :class="regioncolor?'main-text-color':''">{{region?region:'区域'}}</text>
					<image v-show="regioncolor" src="@/static/index/zk01@2x.png" mode=""></image>
					<image v-show="!regioncolor" src="@/static/index/sq01@2x.png" mode=""></image>
				</view>
				<view class="state text-hidden-one" @click="open2" style="width:142rpx;text-center">
					<text class="font-md" :class="buildingcolor?'main-text-color':''">{{statelist?statelist:'状态'}}</text>
					<image v-show="buildingcolor" src="@/static/index/zk01@2x.png" mode=""></image>
					<image v-show="!buildingcolor" src="@/static/index/sq01@2x.png" mode=""></image>
				</view>
				<view class="search-bar">
					 <view class="search-bar-box">
						 <image class="search-span" src="@/static/index/searh.png"/>
						 <input type="text" v-model="contactAddress"  placeholder="查询地址信息" class="search-text" maxlength="10" focus/>
						 <text class="search-btn"  @click="Inquire">查询</text>
					 </view>
				</view>
			</view>
		</view>
		
		<!-- 区域弹框 -->
		<uni-popup ref="popup" type="bottom" @maskClick="maskClick">
			<view class="bg-white" style="border-top-left-radius: 12rpx;border-top-right-radius: 12rpx;">
				<scroll-view scroll-y="true" style="height: 500rpx;">
					<block v-for="(item,index) in area" :key="index">
						<view class="d-flex a-center j-center border-bottom main-border-color pt-2 pb-2"  @click="areaNvbuid(index)">
							{{item.fullname}}
						</view>	
					</block>
				</scroll-view>
			</view>	
		</uni-popup>
		
		<!-- 状态弹框 -->
		<uni-popup ref="popups" type="bottom" @maskClick="maskClick">
			<view class="bg-white" style="border-top-left-radius: 12rpx;border-top-right-radius: 12rpx;">
				<scroll-view scroll-y="true" style="height: 500rpx;">
					<block v-for="(item,index) in state" :key="index">
						<view class="d-flex a-center j-center border-bottom main-border-color pt-2 pb-2" @click="stateNavbuid(index)">
							{{item.statusName}}
						</view>	
					</block>
				</scroll-view>
			</view>	
		</uni-popup>
		
		<view style="height: 139rpx;"></view>
		
		<view class="detalis">
			<view class="detalis-childer" :style="index%2==0?'border: 1rpx solid #F2973C;':'border: 1rpx solid #4BC1B8;'" v-for="(item,index) in listDetails" :key="index">
				<view :style="index%2==0?'background-color: #fff6eb;':'background-color:#e8fbfa'" class="w-100" style="height: 102rpx;border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;">
					<view class="d-flex a-center" style="line-height: 102rpx;">
						<image v-if="index%2==0" src="../../static/details/yel02.png" style="width: 35rpx;height: 43rpx;padding-left:43rpx"></image>
						<image v-else src="../../static/details/blue02.png" style="width: 35rpx;height: 43rpx;padding-left:43rpx"></image>
						<text class="nav-top text-hidden-one" style="padding-left:23rpx;width: 530rpx;">{{item.buildingName}}</text>
					</view>
				</view>
				
				<view class="list-content">
					<view class="d-flex a-center btn-list">
						<image src="../../static/details/ly01.png"></image>
						<text style="color: #AAAAAA;padding-left:18rpx;">楼宇状态</text>
						<text class="ml-auto" style="color: #333333;" v-if="item.buildingStatus==1">合作中</text>
						<text class="ml-auto" style="color: #333333;" v-if="item.buildingStatus==2">沟通中</text>
						<text class="ml-auto" style="color: #333333;" v-if="item.buildingStatus==3">禁止进入</text>
					</view>
					
					<view class="d-flex a-center btn-list">
						<image src="../../static/details/dt01.png"></image>
						<text style="color: #AAAAAA;padding-left:18rpx">靠近的地铁线路</text>
						<text class="ml-auto" style="color: #333333;width:300rpx;text-align: right;">{{item.subwayLine}}</text>
					</view>
					
					<view class="d-flex a-center btn-list">
						<image src="../../static/details/dtz01.png"></image>
						<text style="color: #AAAAAA;padding-left:18rpx">靠近的地铁站</text>
						<text class="ml-auto text-hidden-one" style="color: #333333;width:300rpx;text-align: right;">{{item.metroStation}}</text>
					</view>
					
					<view class="d-flex a-center btn-list">
						<image src="../../static/details/mj01.png"></image>
						<text style="color: #AAAAAA;padding-left:18rpx">是否有门禁</text>
						<text class="ml-auto" style="color: #333333;">{{item.isDoorcontrol}}</text>
					</view>
					
					<view class="d-flex a-center btn-list">
						<image src="../../static/details/sk01.png"></image>
						<text style="color: #AAAAAA;padding-left:18rpx">是否需要电梯刷卡</text>
						<text class="ml-auto" style="color: #333333;">{{item.isElevatorswiping}}</text>
					</view>
					
					<view class="d-flex a-center btn-list">
						<image src="../../static/details/qy01.png"></image>
						<text style="color: #AAAAAA;padding-left:18rpx">签约客户</text>
						<text class="ml-auto" style="color: #333333;">{{item.contractedCustomer}}</text>
					</view>
					
					<view class="d-flex a-center btn-list">
						<image src="../../static/details/bf01.png"></image>
						<text style="color: #AAAAAA;padding-left:18rpx">拜访次数</text>
						<text class="ml-auto" style="color: #333333;">{{item.visitCount}}</text>
					</view>
					
					<view class="d-flex a-center btn-list">
						<image src="../../static/details/lxdz01.png"></image>
						<text style="color: #AAAAAA;padding-left:18rpx">联系地址</text>
						<text class="ml-auto text-hidden-two" style="color: #333333;width: 310rpx;text-align: right;">{{item.contactAddress}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	import NavbarBottom from "@/components/navbar-bottom.vue"
	export default {
		data() {
			return {
				listDetails:[],
				region:"",
				buildingStatus:"",
				statelist:'',
				area:[],
				state:[],
				pageNo:1,
				loadtext:"上拉加载更多",
				region:'',//区域
				buildingStatus:"",//状态
				contactAddress:'',//地址,
				regioncolor:false,
				buildingcolor:false,
			}
		},
		components:{NavbarBottom},
		onLoad(){
			this.getDetails()
		},
		computed:{
			...mapState({
				development:state=>state.user.development,
				resState:state=>state.user.resState,
			})
		},
		mounted() {
			this.area = this.development
			this.state  = this.resState
		},
		onReachBottom(){
			if(this.loadtext =="上拉加载更多"){
				this.loadtext ="加载中..."
				this.pageNo++;
				this.getDetails("",false)
			}
		},
		methods: {
			maskClick(){
				this.regioncolor = false
				this.buildingcolor = false
			},
			//查询
			Inquire(){
				this.getDetails('search')
				this.scorllTop()
			},
			scorllTop(){
				uni.pageScrollTo({
					scrollTop:0,
					duration:100
				})
			},
			open(){
				this.regioncolor = true
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('bottom')
			},
			open2(){
				this.buildingcolor = true
				this.$refs.popups.open('bottom')
			},
			//区域
			areaNvbuid(i){
				this.region = this.area[i].fullname
				this.$refs.popup.close()
				this.regioncolor = false
				this.pageNo =1
				this.getDetails()
				this.scorllTop()
			},
			//状态
			stateNavbuid(i){
				this.buildingStatus = this.state[i].buildingStatus
				this.$refs.popups.close()
				this.statelist = this.state[i].statusName
				this.buildingcolor = false
				this.pageNo =1
				this.getDetails()
				this.scorllTop()
			},
			//获取楼宇详情信息
			getDetails(res,refresh = true){
				if(res=='search' && this.contactAddress==""){
					this.region = "";
					this.buildingStatus="";
					this.statelist="";
					this.pageNo = 1
				}
				this.$api.getDetails({
					region:this.region,
					buildingStatus:this.buildingStatus,
					contactAddress:this.contactAddress,
					pageNo:this.pageNo,
					pageSize:10
				},false).then(res=>{
					if(!res.data){
						uni.showToast({
							title:res.msg,
							icon:'error'
						})
						this.listDetails = [];
						return
					}
					let num = res.count;
					if(res.code==200){
						this.listDetails = refresh?res.data:[...this.listDetails,...res.data]
					
						this.loadtext = this.pageNo < num  ?'上拉加载更多' : '没有更多数据'
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.detalis{
		background-color: #FAFAFA;
		padding:32rpx 31rpx 32rpx 30rpx;
		.detalis-childer:last-child{
			margin-bottom: 0rpx;
		}
		.detalis-childer{
			background:#FFFFFF;
			width: 689rpx;
			border-radius: 20rpx;
			padding-bottom: 40rpx;
			margin-bottom: 30rpx;
			.nav-top{
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 300;
				color: #333333;
			}
			.list-content{
				padding-left:31rpx;
				padding-top:40rpx;
				padding-right: 58rpx;
				image{
					width: 58rpx;
					height: 58rpx;
				}
				text{
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 300;
				}
				.btn-list{
					padding-top:40rpx;
				}
			}
		}
	}
	.nav-tab{
		width:676rpx;
		height: 66rpx;
		display: flex;
		line-height: 66rpx;
		font-size: 28rpx;
		padding:43rpx 30rpx 32rpx 44rpx;
		background-color: #FFFFFF;
		// position: fixed;
		// z-index:666;
		// top:0;
		image{
			width: 22rpx;
			height: 12rpx;
			margin-left:7rpx;
		}
		// .state{
		// 	margin-left:88rpx;
		// }
		.search-bar{
			.search-bar-box{
				width: 374rpx;
				height: 66rpx;
				background: #FFFFFF;
				border: 3rpx solid #F5F5F5;
				border-radius: 32rpx;
				display: flex;
				align-items:center;
				// margin-left:44rpx;
				.search-span{
					width: 25rpx;
					height: 25rpx;
					margin:0 20rpx;
				}
				.search-btn{
					width: 108rpx;
					height: 51rpx;
					background: #F2973C;
					border-radius: 25rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 300;
					color: #FFFFFF;
					margin-right: 11rpx;
					text-align: center;
					line-height:51rpx ;
				}
			}
		}
	}
</style>
